<template>
  <div style="text-align: center">
    <el-form ref="form" :model="form" label-width="130px">
      <el-row>
        <div class="titleStyle">保理签字页</div>
        <el-col :span="12">
          <div class="titlecss">合同编号</div>
          <div class="boxCss">
            <el-input v-model="form.serial" class="indexInput">
              <template slot="prepend">融立第</template>
              <template slot="append">号</template>
            </el-input>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <div class="titleStyle">金融服务合同</div>
        <el-col :span="12">
          <div class="titlecss">合同编号</div>
          <div class="boxCss">
            <el-input v-model="form.serial" class="indexInput">
              <template slot="prepend">融立第</template>
              <template slot="append">号</template></el-input
            >
          </div>
        </el-col>

        <el-col :span="12">
          <div class="titlecss">银行金额:</div>
          <div class="boxCss"><el-input v-model="form.melt"></el-input></div>
          <div class="fontCss">元</div>
        </el-col>
        <el-col :span="12">
          <div class="titlecss">期数:</div>
          <div class="boxCss">
            <el-select v-model="form.deadline" placeholder="请选择">
              <el-option
                v-for="item in nper"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="fontCss">月</div>
          <!-- <el-form-item label="期数" prop="deadline">
            <el-select v-model="form.deadline" placeholder="请选择">
              <el-option
                v-for="item in nper"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item> -->
        </el-col>
        <el-col :span="12">
          <div class="titlecss">服务融资额点数:</div>
          <div class="boxCss">
            <el-input v-model="form.points"></el-input>
            <!-- <el-select v-model="form.points" placeholder="请选择">
              <el-option
                v-for="item in financingLines"
                :key="item.itemValue"
                :label="item.itemValue"
                :value="item.itemValue"
              >
              </el-option>
            </el-select> -->
          </div>
          <div class="fontCss">%</div>
        </el-col>
        <el-col :span="12">
          <div class="titlecss">保证金比例:</div>
          <div class="boxCss"><el-input v-model="form.cash"></el-input></div>
          <div class="fontCss">%</div>
          <div class="Xbox">
            <el-radio-group v-model="form.choiceNo">
              <el-radio :label="1">有</el-radio>
              <el-radio :label="0">无</el-radio>
            </el-radio-group>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <el-button type="primary" style="width: 150px" @click="downloadFun"
      >下载</el-button
    >
    <div
      v-html="VlHtml"
      ref="testref"
      @click="indexButton($event)"
      style="display: none"
    ></div>
  </div>
</template>

<script>
import {
  postDownloadEyd,
  signatureDBAJF,
  // financialData,
  getRecordModel,
  getOrderTable,
  financingPoints,
} from "../../../src/assets/js/api";

export default {
  name: "Agent",
  props: {
    showForm: {
      type: Object,
    },
    isContract: {
      type: Number,
    },
    borrowerName: {
      type: String,
    },
    orderData: {
      type: String,
    },
    points: {
      type: Number,
    },
    dialogVisible: {
      type: Boolean,
    },
  },
  data() {
    return {
      //保理签字页,期数数据!
      nper: [
        { value: 36, label: "36" },
        { value: 60, label: "60" },
      ],
      //服务融资点数!

      //保证金!
      margin: [{ value: "10", label: "10" }],
      form: {
        serial: "", //合同编号!
        melt: "", //银行金额!
        deadline: "", //合同期限!
        points: "", //服务融资额点数!
        cash: "", //保证金!
        apply: null, //客户名称!
        choiceNo: null, //保证金单选项!
      },
      VlHtml: "", //模板字符串回显!
    };
  },
  watch: {
    dialogVisible() {
      if (this.dialogVisible == true) {
        this.form.points = this.points;

        this.form.apply = this.borrowerName;
        // this.getFinancialData();
        this.echoInfo();
      }
    },
  },
  created() {
    this.form.points = this.points;

    this.form.apply = this.borrowerName;
    // this.getFinancialData();
    this.echoInfo();
  },
  methods: {
    // 回显信息请求数据!
    async echoInfo() {
      this.form.points = this.points;
      await getRecordModel(this.orderData).then((res) => {
        let obj = [];
        if (res.data.length > 0) {
          res.data.map((item) => {
            obj += item.approveTable;
          });
        }
        this.VlHtml = obj;
      });
      this.$refs["testref"].click();
      getOrderTable(this.orderData).then((res) => {
        this.form.melt = res.data.contractGuaranteeMoney * 10000; //银行金额回显!
        this.form.deadline = res.data.contractGuaranteeMonth; //期数回显!
        this.form.cash = res.data.deposit; //保证金回显!
      });
      financingPoints(this.orderData).then((res) => {
        // console.log(1111);
        if (res.data) {
          this.form.points = res.data; //服务融资额点数回显!
        }
      });
    },
    //获取服务金融额点数!

    // 模板字符串Html点击事件!
    indexButton(e) {
      let tagElements = e.target.getElementsByTagName("input");
      for (let i = 0; i < tagElements.length; i++) {
        const element = tagElements[i];
        if (element.getAttribute("name") == "contractBorrowNumber") {
          this.form.serial = element.value;
          break;
        }
      }
    },
    downloadFun() {
      if (this.isContract == 2) {
        // this.form.serial = `融立第${this.form.serial}`;
        postDownloadEyd(this.form).then((res) => {
          // let link = document.createElement("a");
          // link.style.display = "none";
          // link.href = res;
          // link.setAttribute("download", "保理签字页");
          // document.body.appendChild(link);
          // link.click();
          // document.body.removeChild(link);
          window.open(res, "_self");
        });
      } else {
        if (this.isContract == 4) {
          // this.form.serial = `融立第${this.form.serial}`;
          signatureDBAJF(this.form).then((res) => {
            // let link = document.createElement("a");
            // link.style.display = "none";
            // link.href = res;
            // link.setAttribute("download", "保理签字页");
            // document.body.appendChild(link);
            // link.click();
            // document.body.removeChild(link);
            window.open(res, "_self");
          });
        }
      }
    },
    formResetFields(data) {
      if (data == true) {
        this.form.serial = "";
        this.form.melt = "";
        this.form.deadline = "";
        this.form.points = "";
        this.form.cash = "";
        this.form.apply = "";
      }
    },
  },
};
</script>

<style scoped type="less">
.el-form {
  margin-bottom: 28px;
  padding: 22px 22px 0 22px;
  border: 1px #eee solid;
}
.company {
  float: right;
  width: 30px;
  text-align: center;
}
.companyInput {
  width: calc(100% - 30px);
}
::v-deep .commpanyItem .el-form-item__content {
  width: 180px;
}
.hetongtd {
  width: 650px;
  height: 40px;
  border: 1px #eee solid;
}
.hetongtr {
  width: 100%;
  border: 1px red solid;
}
.hetongInput {
  width: 100px;
  height: 20px !important;
  border: 1px rgba(0, 0, 0, 0) solid;
}
.hetongTit {
  line-height: 40px;
  float: left;
  width: 30%;
  height: 40px;
  border-right: 1px #eee solid;
}
.hetongContent {
  float: left;
  width: 65%;
  text-align: center;
}
.hetongContent ::v-deep.el-input__inner {
  height: 35px;
  border: 1px rgba(0, 0, 0, 0) solid;
}
table {
  width: 100%;
}
.el-radio {
  line-height: 40px;
}
.titleStyle {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  margin-left: -90%;
}
.titlecss {
  line-height: 40px;
  display: inline-block;
  width: 30%;
  height: 40px;
  text-align: right;
}
.boxCss {
  font-weight: bold;
  line-height: 40px;
  width: 40%;
  margin-left: 20px;
}
.fontCss {
  font-weight: bold;
  line-height: 40px;
  height: 40px;
  margin-left: 10px;
}
.el-col-12 {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 10px;
  margin-bottom: 10px;
}
.Xbox {
  position: absolute;
  bottom: 6%;
  left: 40%;
  width: 110px;
  font-weight: bold;
  line-height: 40px;
  height: 40px;
}
/deep/.indexInput {
  width: 260px;
}
</style>
